<template>
  <div class="main">
    <div class="main_content">
      <div class="main_top">
        <div class="hp_poem">
          <div
            v-for="(line, index) in verse"
            :key="index"
            :class="['line', index <= fadeIndex ? 'fade-in' : '']"
          >
            {{ line }}
            <!-- :class="['line', index <= fadeIndex ? 'fade-in' : '']" -->
          </div>
        </div>
      </div>
      <div class="main_bottom">
        <nuxt-icon name="down" />
      </div>
    </div>
    <div class="main_articles">
      <div class="main_articles_content">
        <div class="articles_title">
          <div class="articles_title_header">热门文章</div>
          <div class="articles_title_text">黄河西来决昆仑，咆哮万里触龙门</div>
        </div>
        <div class="articles_main">
          <card />
          <card />
          <card />
        </div>
      </div>
    </div>
    <div class="main_about">
      <div class="main_about_content"></div>
    </div>
    <div class="last"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
const fadeIndex = ref(0);
const verse = ref([
  "滚滚长江东逝水",
  "浪花淘尽英雄",
  "是非成败转头空",
  "青山依旧在",
  "几度夕阳红",
  "白发渔樵江渚上",
  "惯看秋月春风",
  "一壶浊酒喜相逢",
  "古今多少事",
  "都付笑谈中",
]);

onMounted(() => {
  setFadeIndex();
});
const setFadeIndex = () => {
  const timer = setInterval(() => {
    fadeIndex.value += 1;
  }, 1000);
};
</script>

<style scoped lang="scss">
.main {
  overflow: auto;
  .main_content {
    height: 100vh;
    background: url("../assets/images/bg.jpg") no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
    .main_top {
      font-size: 20px;
      color: #fff;
      position: absolute;
      left: 30px;
      top: 60px;
      .hp_poem {
        /* 一行代码就可以解决了 */
        writing-mode: vertical-rl;
        .line {
          line-height: 2;
          opacity: 0;
          animation-fill-mode: forwards;
        }
        /* 淡入动画 */
        .fade-in {
          animation-name: fade-in;
          animation-duration: 1s;
          animation-timing-function: ease-in;
        }
        /* 定义动画效果 */
        @keyframes fade-in {
          from {
            opacity: 0; // 初始透明度为0
          }
          to {
            opacity: 1; // 结束透明度为1
          }
        }
        .fade-out {
          animation-name: fade-out;
          animation-duration: 1s;
          animation-timing-function: ease-out;
        }
        @keyframes fade-out {
          from {
            opacity: 1;
          }
          to {
            opacity: 0;
          }
        }
      }
    }
    .main_bottom {
      position: absolute;
      bottom: 0;
      left: 49%;
      color: #fff;
      font-size: 40px;
    }
  }
  .main_articles {
    width: 100%;
    height: 500px;
    background-color: #e8e8e8;
    display: flex;
    justify-content: center;
    align-items: center;
    .main_articles_content {
      max-width: 1170px;
      .articles_title {
        display: flex;
        flex-direction: column;
        align-items: center;

        .articles_title_header {
          font-size: 32px;
          padding-bottom: 30px;
          position: relative;
          font-weight: 500;
        }
        .articles_title_header:after {
          position: absolute;
          width: 50px;
          height: 2px;
          content: "";
          left: 50%;
          margin-left: -25px;
          bottom: -1px;
          background: #00c2ff;
        }
        .articles_title_text {
          padding: 20px 0;
          color: #888;
        }
      }

      .articles_main {
        display: flex;
      }
    }
  }
  .main_about {
    padding: 130px 0;
    background-image: url("@/assets/images/city.jpg");
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .main_about_content {
      max-width: 1170px;
      display: flex;
    }
  }
  .main_about:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .last {
    height: 500px;
  }
}
</style>
